<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>学生列表</title>
</head>

<body class="bg-gray-100 font-sans">
<!-- 右上角退出登录按钮 -->
<div class="absolute top-4 right-4">
    <button onclick="logout()" class="bg-red-500 text-white p-2 rounded hover:bg-red-600">
        <i class="fa-solid fa-right-from-bracket"></i> 退出登录
    </button>
</div>

<div class="container mx-auto p-8">
    <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">学生列表</h1>
    <div class="flex mb-6 shadow-md">
        <input type="text" id="name" placeholder="按姓名搜索" class="border border-gray-300 p-3 rounded-l w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500">
        <input type="text" id="dormId" placeholder="按宿舍 ID 搜索" class="border border-gray-300 p-3 w-full focus:outline-none focus:ring-blue-500 focus:border-blue-500">
        <button id="searchBtn" class="bg-blue-500 text-white p-3 rounded-r hover:bg-blue-600">
            <i class="fa-solid fa-magnifying-glass"></i> 搜索
        </button>
    </div>
    <div class="overflow-x-auto shadow-md rounded">
        <table class="w-full border-collapse border border-gray-300">
            <thead>
            <tr class="bg-gray-200">
                <th class="border border-gray-300 p-3 text-left">学生 ID</th>
                <th class="border border-gray-300 p-3 text-left">姓名</th>
                <th class="border border-gray-300 p-3 text-left">性别</th>
                <th class="border border-gray-300 p-3 text-left">出生日期</th>
                <th class="border border-gray-300 p-3 text-left">身份证号</th>
                <th class="border border-gray-300 p-3 text-left">学院</th>
                <th class="border border-gray-300 p-3 text-left">专业</th>
                <th class="border border-gray-300 p-3 text-left">班级</th>
                <th class="border border-gray-300 p-3 text-left">状态</th>
                <th class="border border-gray-300 p-3 text-left">宿舍 ID</th>
                <th class="border border-gray-300 p-3 text-left">床位号</th>
                <th class="border border-gray-300 p-3 text-left">电话</th>
                <th class="border border-gray-300 p-3 text-left">邮箱</th>
                <th class="border border-gray-300 p-3 text-left">紧急联系人</th>
                <th class="border border-gray-300 p-3 text-left">用户名</th>
            </tr>
            </thead>
            <tbody id="studentTableBody"></tbody>
        </table>
    </div>
    <div class="flex justify-between mt-6">
        <button id="prevPageBtn" class="bg-gray-500 text-white p-3 rounded hover:bg-gray-600" disabled>
            <i class="fa-solid fa-chevron-left"></i> 上一页
        </button>
        <span id="pageInfo" class="text-gray-700 self-center"></span>
        <button id="nextPageBtn" class="bg-gray-500 text-white p-3 rounded hover:bg-gray-600">
            下一页 <i class="fa-solid fa-chevron-right"></i>
        </button>
    </div>
</div>

<script>
    let currentPage = 1;
    const pageSize = 3;
    let totalPages = 0;

    function fetchStudents(page, name = '', dormId = '') {
        const url = `student/list?page=${page}&size=${pageSize}${name ? `&action=search&name=${name}` : ''}${dormId ? `&action=search&dormId=${dormId}` : ''}`;
        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    const result = data.data;
                    totalPages = result.totalPages;
                    currentPage = result.currentPage;
                    const tableBody = document.getElementById('studentTableBody');
                    tableBody.innerHTML = '';
                    result.data.forEach(student => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                                <td class="border border-gray-300 p-3">${student.studentId}</td>
                                <td class="border border-gray-300 p-3">${student.name}</td>
                                <td class="border border-gray-300 p-3">${student.gender}</td>
                                <td class="border border-gray-300 p-3">${student.birthDate}</td>
                                <td class="border border-gray-300 p-3">${student.idCard}</td>
                                <td class="border border-gray-300 p-3">${student.college}</td>
                                <td class="border border-gray-300 p-3">${student.major}</td>
                                <td class="border border-gray-300 p-3">${student.className}</td>
                                <td class="border border-gray-300 p-3">${student.status}</td>
                                <td class="border border-gray-300 p-3">${student.dormId}</td>
                                <td class="border border-gray-300 p-3">${student.bedNumber}</td>
                                <td class="border border-gray-300 p-3">${student.phone}</td>
                                <td class="border border-gray-300 p-3">${student.email}</td>
                                <td class="border border-gray-300 p-3">${student.emergencyContact}</td>
                                <td class="border border-gray-300 p-3">${student.username}</td>
                            `;
                        tableBody.appendChild(row);
                    });
                    updatePaginationInfo();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('请求出错:', error);
                alert('请求出错，请稍后重试');
            });
    }

    function updatePaginationInfo() {
        const pageInfo = document.getElementById('pageInfo');
        pageInfo.textContent = `第 ${currentPage} 页，共 ${totalPages} 页`;
        const prevPageBtn = document.getElementById('prevPageBtn');
        const nextPageBtn = document.getElementById('nextPageBtn');
        prevPageBtn.disabled = currentPage === 1;
        nextPageBtn.disabled = currentPage === totalPages;
    }

    document.getElementById('searchBtn').addEventListener('click', () => {
        const name = document.getElementById('name').value;
        const dormId = document.getElementById('dormId').value;
        currentPage = 1;
        fetchStudents(currentPage, name, dormId);
    });

    document.getElementById('prevPageBtn').addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            const name = document.getElementById('name').value;
            const dormId = document.getElementById('dormId').value;
            fetchStudents(currentPage, name, dormId);
        }
    });

    document.getElementById('nextPageBtn').addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            const name = document.getElementById('name').value;
            const dormId = document.getElementById('dormId').value;
            fetchStudents(currentPage, name, dormId);
        }
    });

    // 初始加载
    fetchStudents(currentPage);

    function logout() {
        fetch('logout', { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                alert(data.data); // 显示"退出系统成功"
                window.location.href = "login.html"; // 跳转登录页
            });
    }
</script>
</body>

</html>
